import {shuffle} from '@/utils';
// @ts-ignore
import {useModel} from '@umijs/max';
import {Card, Divider, Empty, Space, Tag, Modal} from 'antd';
import {useState, forwardRef, useImperativeHandle, useEffect} from 'react';
import styles from './index.less';
import JDInputPage from "@/pages/Resume/components/JdInput";
import {ApiQueryOne} from "@/services/resume/ResumeController";

export default forwardRef((props: any, ref: any) => {
	const {initStyles, business_diagnosis, setBusiness_diagnosis} = useModel('Resume.resumeModel');
	const [isModalOpen, setIsModalOpen] = useState(false);
	const [arrStyles] = useState(shuffle(initStyles));

	// 通过传入的 index 在 arrStyles 中取一个样式，如果都已经取过了，就重新开始计算
	const getStyle = (index: number) => {
		let _index = index;

		if (_index >= initStyles.length) {
			_index = _index - initStyles.length;
		}
		return arrStyles[_index];
	};

	const handleCancel = () => {
		setIsModalOpen(false);
	};
	const onOk = () => {
		setIsModalOpen(false);
	}

	const getData = async (id: string) => {
		const res: API.Result_One = await ApiQueryOne({id})
		console.log('%c ' + 'res', 'background: green; color: #fff;')
		console.log(res)
		if (res.code === 1) {
			setBusiness_diagnosis(res.data.data)
		}
	}

	useImperativeHandle(ref, () => ({
		openModal: ({id}: any) => {
			setIsModalOpen(true);
			getData(id);
		}
	}));

	return (
		<Modal title='详情' width="80%" open={isModalOpen} onCancel={handleCancel} onOk={onOk}>
			<div className={styles.resultBox}>
				{/* JD详情 */}
				<div className={styles.topBox}>
					<JDInputPage/>
				</div>
				<div className={styles.resultContent}>
					{business_diagnosis.length > 0 &&
						business_diagnosis?.map((item: any, index: number) => {
							return (
								<div
									key={index}
									className={styles.resultItem}
									style={getStyle(index).border}
								>
									<div className={styles.title} style={getStyle(index).title}>
										{item.key_point}
									</div>

									<Divider style={{backgroundColor: getStyle(index).color.color}}/>

									{/* 维度 */}
									<Space wrap>
										{item.key_dimensions.length > 0 && item.key_dimensions.map((el: any, _index: number) => (
											<Tag key={index + _index} color={getStyle(_index).color.color}>{el}</Tag>))}
									</Space>

									{/*<div className={styles.resultItemJudgement}>*/}
									{/*	{item.judgement}*/}
									{/*</div>*/}
								</div>
							);
						})}
				</div>
			</div>
		</Modal>
	);
});

